<template>
	<view class="container">
		<!-- 作文任务信息卡片 -->
		<view class="task-card">
			<view class="task-content f-d-c">
				<view class="task-title">{{ assignmentInfo.title }}</view>
				<view style="width: 100%;" class="f f-j-b">

					<view class="task-info ">
						<view class="info-item">
							<text class="info-label">班级:</text>
							<text class="info-value">{{ assignmentInfo.class }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">时间:</text>
							<text class="info-value">{{ assignmentInfo.date }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">老师:</text>
							<text class="info-value">{{ assignmentInfo.teacher }}</text>
						</view>
					</view>
					<view class="task-icon">
						<view class="icon-container">
							<image src="/static/home/bgtime.png" class="decoration-img" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 听写答案区域 -->
		<view class="answer-section">
			<view class="section-title">听写答案</view>
			<view class="answer-content">
				<view class="answer-item" style="text-align: center;">
					春晓
				</view>
				<view class="answer-item" style="text-align: center;">
					唐·孟浩然
				</view>
				<view class="answer-item" style="text-align: center;">
					春眠不觉晓，处处闻啼鸟
				</view>
				<view class="answer-item" style="text-align: center;">

					夜来风雨声，花落知多少

				</view>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="action-buttons">
			<button class="action-btn secondary" @tap="editAssignment">
				继续编辑
			</button>
			<button class="action-btn primary" @tap="startWriting">
				好的
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				assignmentInfo: {
					title: '2025.5.20-作文',
					class: '三年一班',
					date: '2025.5.20',
					teacher: '小明',
					deadline: '2025.5.25 23:59',
					wordCount: '不少于300字',
					score: 100,
					status: 'pending' // pending, submitted, graded
				},

				answerList: [
					'作文题目:我的祖国',
					'字迹工整',
					'逻辑正确。'
				]
			}
		},

		computed: {

			statusClass() {
				return {
					'status-pending': this.assignmentInfo.status === 'pending',
					'status-submitted': this.assignmentInfo.status === 'submitted',
					'status-graded': this.assignmentInfo.status === 'graded'
				};
			},

			statusEmoji() {
				const emojiMap = {
					'pending': '⏰',
					'submitted': '✅',
					'graded': '🎯'
				};
				return emojiMap[this.assignmentInfo.status] || '📝';
			},

			statusText() {
				const textMap = {
					'pending': '待完成',
					'submitted': '已提交',
					'graded': '已批改'
				};
				return textMap[this.assignmentInfo.status] || '未知状态';
			},

			statusDesc() {
				const descMap = {
					'pending': '请在截止时间前完成作业',
					'submitted': '作业已提交，等待老师批改',
					'graded': '作业已批改完成，可查看成绩'
				};
				return descMap[this.assignmentInfo.status] || '';
			}
		},

		onLoad(options) {
			// 根据传入的参数加载作业详情
			if (options.id) {
				this.loadAssignmentDetail(options.id);
			}
		},

		methods: {
			startWriting() {
				uni.navigateTo({
					url: '/pages/index/compositionList'
				})
			},
			// 加载作业详情
			loadAssignmentDetail(id) {
				// 模拟API调用
				console.log('加载作业详情:', id);

				// 这里可以根据实际需求调用API获取数据
				uni.request({
					url: '/api/assignment/' + id,
					success: (res) => {
						this.assignmentInfo = res.data;
					}
				});
			},

			// 编辑作业
			editAssignment() {
				uni.navigateTo({
					url: '/pages/assignment-edit/index?id=' + this.assignmentInfo.id
				});
			},

			// // 开始作文
			// startWriting() {
			// 	if (this.assignmentInfo.status === 'graded') {
			// 		uni.showToast({
			// 			title: '作业已批改，无法修改',
			// 			icon: 'none'
			// 		});
			// 		return;
			// 	}

			// 	uni.navigateTo({
			// 		url: '/pages/writing/index?assignmentId=' + this.assignmentInfo.id
			// 	});
			// },

			// 查看提交历史
			viewHistory() {
				uni.navigateTo({
					url: '/pages/submission-history/index?assignmentId=' + this.assignmentInfo.id
				});
			},

			// 分享作业
			shareAssignment() {
				uni.showActionSheet({
					itemList: ['分享给同学', '分享给家长', '复制链接'],
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								this.shareToClassmates();
								break;
							case 1:
								this.shareToParents();
								break;
							case 2:
								this.copyLink();
								break;
						}
					}
				});
			},

			// 分享给同学
			shareToClassmates() {
				uni.showToast({
					title: '已分享给同学',
					icon: 'success'
				});
			},

			// 分享给家长
			shareToParents() {
				uni.showToast({
					title: '已分享给家长',
					icon: 'success'
				});
			},

			// 复制链接
			copyLink() {
				uni.setClipboardData({
					data: 'https://example.com/assignment/' + this.assignmentInfo.id,
					success: () => {
						uni.showToast({
							title: '链接已复制',
							icon: 'success'
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #fff;
		padding: 30rpx;
		padding-bottom: 120rpx;
	}

	.task-card {
		background: linear-gradient(90deg, #94EFD6 0%, #DCFFE0 100%);
		border-radius: 40rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		position: relative;
		overflow: hidden;
	}

	.task-content {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.task-info {
		flex: 1;
	}

	.task-title {
		width: 100%;
		font-size: 36rpx;
		font-weight: bold;
		color: #2c3e50;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.info-item {
		display: flex;
		margin-bottom: 12rpx;
	}

	.info-label {
		font-size: 28rpx;
		color: #34495e;
		margin-right: 10rpx;
		min-width: 80rpx;
	}

	.info-value {
		font-size: 28rpx;
		color: #2c3e50;
		font-weight: 500;
	}

	.task-icon {
		width: 130rpx;
		height: 208rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon-container {
		width: 100%;
		height: 100%;

	}

	.decoration-img {
		width: 100%;
		height: 100%;
	}

	.answer-section {
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #2c3e50;
		margin-bottom: 20rpx;
	}

	.answer-content {
		background: #FDE5E5;
		border-radius: 40rpx;
		padding: 30rpx;
	}

	.answer-item {
		margin-bottom: 20rpx;

	}

	.answer-number {
		font-size: 28rpx;
		font-weight: bold;
		color: #2c3e50;
		margin-right: 15rpx;
		min-width: 40rpx;
	}

	.answer-text {
		font-size: 28rpx;
		color: #2c3e50;
		line-height: 1.6;
		flex: 1;
	}

	.extra-info {
		margin-bottom: 30rpx;
	}

	.info-card {
		background-color: white;
		border-radius: 15rpx;
		padding: 25rpx;
		margin-bottom: 15rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.card-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}

	.card-title {
		font-size: 26rpx;
		color: #666;
		font-weight: 500;
	}

	.card-content {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		padding-left: 42rpx;
	}

	.status-section {
		margin-bottom: 30rpx;
	}

	.status-card {
		background-color: white;
		border-radius: 15rpx;
		padding: 25rpx;
		display: flex;
		align-items: center;
		border-left: 6rpx solid #ddd;

		&.status-pending {
			border-left-color: #ffc107;
			background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
		}

		&.status-submitted {
			border-left-color: #28a745;
			background: linear-gradient(135deg, #d4edda 0%, #a8e6cf 100%);
		}

		&.status-graded {
			border-left-color: #007bff;
			background: linear-gradient(135deg, #cce7ff 0%, #a8d8ff 100%);
		}
	}

	.status-icon {
		margin-right: 20rpx;
	}

	.status-emoji {
		font-size: 40rpx;
	}

	.status-info {
		flex: 1;
	}

	.status-title {
		display: block;
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 5rpx;
	}

	.status-desc {
		display: block;
		font-size: 24rpx;
		color: #666;
		line-height: 1.4;
	}

	.action-buttons {
		position: fixed;
		bottom: 40rpx;
		left: 20rpx;
		right: 20rpx;
		display: flex;
		gap: 20rpx;
		z-index: 100;
	}

	.action-btn {
		flex: 1;
		width: 288rpx;
		height: 104rpx;
		background: #CCCCCC;
		border-radius: 30rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;

		&.secondary {
			background-color: #6c757d;
			color: white;
		}

		&.primary {
			background: #05C490;
			color: white;
		}

		&:active {
			transform: scale(0.98);
		}
	}

	.action-btn::after {
		border: none;
	}
</style>